قالب را باید برای چه دستگاههای طراحی کرد؟

وب سایت شما باید در مانیتورها، تبلتها و گوشی های موبایل به گونه ای نمایش داده شود که برای مشاهده محتوای سایت نیاز به اسکرول افقی نباشد. برای اینکه بتوانید این کار را به خوبی انجام دهید باید سایز هرکدام از این دستگاهها را داشته باشید. اگر وقت کافی برای بررسی این موضوع ندارید می توانید از فریم ورکهای محبوب استفاده کنید زیرا توسعه دهندگان این فریم ورکها به اندازه کافی بررسی کرده اند و به خوبی می دانند که وسایل الکترونیکی چه ابعادی دارند. فریم ورک بوت استرپ دستگاههای الکترونیکی را به این صورت دسته بندی کرده است:

Phones: <768px
Tablets: ≥768px
Medium Desktops: ≥992px
Large Desktops: ≥1200px

علامت های کوچکتر(>)برای نمایش اندازه کمتر از 768px و علامت بزرگتر(<)برای نمایش اندازه بیشتر از 768px استفاده می شود.

چگونه عناصر وب سایت را در دستگاههای مختلف نمایش دهیم؟

برای اینکه بتوانید پهنای عناصر صفحات وب سایت را در دستگاههای مختلف مدیریت کنید باید از max-width و min-width استفاده کنید.به عنوان مثال اگر یک تگ Div با آی دی Codefriend در سورس وب سایت شما وجود دارد، به کمک کد زیر می توانید عرض این تگ را در گوشیهای موبایل به گونه ای تنظیم کنید که همواره در وسط صفحه نمایش داده شود و اگر ابعاد گوشی کوچک تر از 767px باشد، ابعاد این تگ متناسب با ابعاد گوشی تغییر کند:

@media screen and (max-width: 767px) { 
#codefriend { width: 100%; margin:0 auto; } 
}

حال اگر بخواهید این تگ را در تبلتها در سمت راست نمایش دهید باید یک مدیا کوئری دیگر اضافه کنید و استایل آن را به این صورت تعیین کنید:

@media screen and (min-width: 768px) and (max-width: 991px){
#codefriend { width: 150px; float: right; }
}
کد فرند